<template>
	<app-layout>

		<search-top ref="search" :searchForm.sync="searchForm" @search="Search" :showtime="false">
			<view class="tn-bg-white topForm" v-if="putin['主表编号']">
				<tn-form class="tn-padding-sm" :labelWidth="150" :model="putin" ref="uForm" :errorType="['message']">
					<view class="tn-bg-white ">
						<tn-form-item label="入库单" prop="order_no">
							<tn-input v-model="putin.order_no" type="string" placeholder="入库单"></tn-input>
							<tn-tag slot="right" shape="radius" fontColor="#fff" class="tn-shadow"
								:class="putin['审核']==1?'tn-bg-green' :'tn-bg-orange'">
								{{ putin['审核']==1?'已审核' : '待审核'}}</tn-tag>
						</tn-form-item>

						<tn-form-item label="送货单" prop="send_no">
							<tn-input v-model="putin.send_no" type="string" placeholder="送货单"></tn-input>
						</tn-form-item>
						<view class="tn-flex">
							<tn-form-item label="供应商" prop="supplier">
								<tn-input v-model="putin['供应商']" type="string" disabled placeholder="供应商"></tn-input>
							</tn-form-item>

							<tn-form-item label="入库日期" prop="date">
								<tn-input v-model="putin.date" type="string" disabled placeholder="入库日期"></tn-input>
							</tn-form-item>
						</view>
					</view>
				</tn-form>

			</view>
		</search-top>

		<view class="nav-height" v-if="putin['主表编号']"> </view>
		<view class="list">
			<!-- 入库单-->
			<view class="report tn-text-md" v-for="report,index in list" :key="report.id">
				<view class="status" :class=" report['审核']==1?'tn-bg-green' :'tn-bg-orange'">
					<view class="tn-icon-bookmark-fill"></view>
					{{ report['审核']==1?'审核通过' : '待审核'}}
				</view>
				<view class="">
					<view class="row">
						<view class="value tn-text-bold tn-text-lg">
							NO.{{report['序号'] }} 采购单：{{report['主表编号'] }}
						</view>
					</view>
					<view class="row">
						<view class="value">
							品号：{{report['物料编号'] }}
						</view>
						<view class="value">
							品名：{{report['物料名称'] }}
						</view>
					</view>
					<view class="row">
						<view class="value">
							采购量：{{report['采购数量'] }}
						</view>
						<view class="value">
							累计入库：{{report['累计入库'] }}
						</view>
					</view>
					<view class="row">
						<view class="value">
							仓库：{{report['仓库'] }}
						</view>
						<view class="value">
							仓位：{{report['仓位'] }}
						</view>
					</view>
					<view class="row">
						<view class="value">
							验收人：{{report['验收人'] }}
						</view>
						<view class="value">
							<!-- 仓位：{{report['仓位'] }} -->
						</view>
					</view>


				</view>
				<block>
					<!-- 编辑-->
					<tn-form :labelWidth="120" :model="report" ref="uForm" :errorType="['message']">
						<view class="tn-bg-white ">
							<tn-form-item label="入库量" prop="入库量">
								<tn-input :max-length="8" v-model="report['入库数量']" type="Number"
									placeholder="入库数量"></tn-input>
							</tn-form-item>
						</view>
					</tn-form>
				</block>
				<view class="btn">
					<tn-button v-if="report['入库数量'] !=report.goodsnum" fontColor="#fff" @click="editone(report)" backgroundColor="#ffaa00" class="tn-flex-1 bt" height="70rpx">保存修改</tn-button>
					<print-btn v-else @print="print" :pdata="report">打印</print-btn>
				</view>
			</view>

		</view>
		<tn-select labelName="不良类型" valueName="序号" v-model="badshow" :list="cklist" @confirm="badconfirm"></tn-select>
		<tn-empty v-if="list.length<1" class="error" icon="/static/error/common.png" mode="data"></tn-empty>
		<view class='tn-tabbar-height'></view>

		<bottom-btn @edit="edit" @verify="verify" @save="save" @print="printAll" :FItemId="FItemId"
			:status="'1'"></bottom-btn>

	</app-layout>
</template>

<script>
	import locationmixin from '@/libs/mixin/location_mixin.js'
	import SearchTop from '@/components/SearchTop'
	import {
		mapGetters,
		mapState
	} from 'vuex';
	export default {
		name: 'PUTIN_ADD',
		mixins: [locationmixin],
		components: {
			SearchTop
		},
		computed: {
			...mapState({
				userinfo: state => state.userinfo
			})
		},
		data() {
			return {
				title: '新增',
				FItemId: 10001,
				putin: {
					order_no: this.$utils.getNo(0),
					send_no: '',
					user: '',
					date: this.$utils.getAgoDay(0),
				},
				status: '',
				searchForm: {},
				more: false,

				RunType: 0,
				//拍照用的
				formData: {},

				list: [],

				//不良类型
				badshow: false,
				cklist: [{
					label: '1'
				}],

				form: {
					goodsnum: 0,
				},

			}
		},
		onLoad(options) {
			console.log(options)
			let {
				purchase_no
			} = options
			if (purchase_no) this.searchForm.work_number = purchase_no
		},
		onReady() {},
		onShow() {
			let t = this;
			if (!t.userinfo) t.$user.getInfo()
		},
		methods: {

			print() {
				console.log('print')
			},
			edit() {
				console.log('edit')
			},
			editone(report) {
				console.log('editone', report)
				let that = this;
				uni.showModal({
					title: "提示",
					content: '确认修改单据数量?',
					success(e) {
						if (e.confirm) {
							that.$t.message.loading("提交中");
							that.$request({
								url: that.$api.ordertRkNum,
								data: {
									pi_sub_id:report.ID,//	字符串	必须			入库子表ID
									pi_rk_num:report['入库数量']//	字符串	必须			入库数量
								},
								method: "POST",
							}).then(response => {
								that.$t.message.closeLoading();
							
								uni.showModal({
									title: '提示',
									content: response.msg || '操作成功',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
											that.getList(1)
										}
									}
								});
							}).catch((msg) => {
								that.$t.message.toast(msg);
								that.$t.message.closeLoading();
							});
						}
					}
				})
			},
			verify() {
				console.log('verify')
				let that = this;
				uni.showModal({
					title: "提示",
					content: '确认审批通过该单据?',
					success(e) {
						if (e.confirm) {
							that.$t.message.loading("提交中");
							that.$request({
								url: that.$api.purchase.editRkStatus,
								data: {
									pi_no:that.searchForm.work_number,//字符串	必须			入库单号
									status:1	//字符串	必须			状态 1已审 2未审
								},
								method: "POST",
							}).then(response => {
								that.$t.message.closeLoading();
								
								uni.showModal({
									title: '提示',
									content: response.msg || '操作成功',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
										}
									}
								});
							}).catch((msg) => {
								that.$t.message.toast(msg);
								that.$t.message.closeLoading();
							});
						}
					}
				})

			},
			save() {
				console.log('save')
				let that = this;
				if (that.putin['审核'] == 0) {
					uni.showModal({
						title: "提示",
						content: '该订单还未审核，请联系主管审核',
						showCancel: false,
					})
				}
			},
			printAll() {
				console.log('printAll')
			},
			scanCode(index) {
				let that = this;
				that.$jwx.scanQRCode().then(res=>{
					that.list[index].ckcode = res
				})
			},

			Search(e) {
				console.log(e)
				this.searchForm = e;
				this.getList(1)
			},

			badchange(idx) {
				if(this.putin['审核']=='1') return;
				this.activeIndex = idx;
				this.cklist = this.list[idx] && this.list[idx]['不良类型'];
				this.badshow = true;
			},

			badconfirm(e, ) {
				this.list[this.activeIndex].bad = e[0].value;
				this.list[this.activeIndex].badtype = e[0].label;
			},

			del(index) {
				this.list.splice(index, 1)
			},

			getList(issearch = 0) {
				let that = this;
				that.$t.message.loading("加载中");
				console.log(that.cklist)
				if (issearch) that.page = 1, that.list = [];
				that.$request({
					url: that.$api.purchase.detail,
					data: {
						limit_page: that.page,
						limit_count: 20,
						pi_no: that.searchForm.work_number || '',
					}
				}).then(response => {
					that.$t.message.closeLoading();
					let reslist = [];
					if (response.list.length > 0) {
						response.list.forEach(e => {
							reslist.push({
								goodsnum: e['入库数量'],
								...e,
							})
						})
					}

					if (that.page !== 1) {
						that.list = that.list.concat(reslist);
					} else {
						that.list = reslist;
					}
					that.page = reslist.length ? that.page + 1 : that.page;
				}).catch((msg) => {
					that.$t.message.toast(msg);
					that.$t.message.closeLoading();
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.list {
		margin-top: 100upx;

	}

	.topForm {
		position: relative;

		.status {
			display: flex;
			min-width: 150upx;
			align-items: center;
			justify-content: center;
			color: #fff;
			position: absolute;
			right: 0;
			top: 20upx;
			padding: 10upx 0;
			border-radius: 25upx;
		}
	}

	.nav-height {
		height: 340upx;
	}

	.btn {
		padding-top: 20upx;
		padding-top: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.bt {
			margin: 0 10upx;
		}
	}



	.report {
		background: #fff;
		padding: 20upx;
		border: 1upx solid #eee;
		margin: 10upx;
		border-radius: 10upx;
		box-shadow: 1px 1px 0px 0px #aba7a7;
		position: relative;



		.status {

			display: flex;
			min-width: 150upx;
			align-items: center;
			justify-content: center;
			color: #fff;
			position: absolute;
			right: 0;
			top: 20upx;
			padding: 10upx 0;
			border-top-left-radius: 25upx;
			border-bottom-left-radius: 25upx;
			// transform: rotate(45deg);
			// clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
		}


		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10upx 0;
		}

		.value {
			min-width: 50%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.tn-form-item {
			padding: 0;
		}
	}

	.right {
		width: 32%;
		display: flex;
		justify-content: space-evenly;
		align-content: center;
		flex-wrap: wrap;

		.more {
			font-size: 40upx;
			display: flex;
			align-items: center;
		}
	}

	.userinfo {
		display: flex;
		font-size: 26upx;
		align-items: center;
		padding: 0 10px;
	}

	.search {
		background-color: #fff;
		padding: 10px;



		.search-btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 20upx;
			border-top: 2px solid #eee;
		}
	}

	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}
</style>